<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <view class="map-content">
      <view class="header-main" :class="status == 'open' ? 'z-index' : ''">
        <view class="header-box">
          <u-dropdown class="u-dropdown" height="90" @open="handleOpen" @close="handleClose">
            <u-dropdown-item v-model="distanceValue" :title="`当前范围：${distanceNum}`" :options="options" @change="handleChange" />
          </u-dropdown>
          <view class="cur-loc" v-if="!caseShow">
            <u-image :src="require('@/static/market/cur-loc-gree.png')" width="100%" mode="widthFix" @click="toCurrent"></u-image>
          </view>
        </view>
      </view>
      <view :class="status == 'close' ? 'z-index' : ''" :style="{ width: getContainerWidth(), height: getContainerHeight() }" id="container"></view>
      <view class="bottom-popup u-flex u-col-center u-row-center" :class="!caseShow && status == 'open' ? '' : 'z-index'" @tap="handleOpenCase">
        <u-icon size="32" name="arrow-down" color="#606266" label="展开违规案件列表" />
      </view>
    </view>
    <u-popup class="area-map" mode="bottom" :height="getPopupHeight" :mask="false" :safe-area-inset-bottom="true" :closeable="true" v-model="caseShow" :z-index="9999" border-radius="20">
      <view class="area-map-title">
        违规案件
      </view>
      <view class="area-map-content" v-if="tabIndex == 1">
        <template v-for="(item, index) in containsList">
          <u-row gutter="10" :key="index" class="u-p-t-15 u-p-b-15" :class="containsList.length - 1 == index ? '' : 'u-border-bottom '" @tap="handleClick(item)">
            <u-col span="11">
              <view class="lt-row">
                <view class="lt-left-label">
                  案件编号：
                </view>
                <view class="lt-right-value">
                  {{ item.caseCode }}
                </view>
              </view>
              <view class="lt-row">
                <view class="lt-left-label">
                  当事人：
                </view>
                <view class="lt-right-value">
                  {{ item.party }}
                </view>
              </view>
              <view class="lt-row">
                <view class="lt-left-label">
                  主案由：
                </view>
                <view class="lt-right-value">
                  {{ item.caseOfAction }}
                </view>
              </view>
              <view class="lt-row">
                <view class="lt-left-label">
                  案发地：
                </view>
                <view class="lt-right-value">
                  {{ item.casePlace }}
                </view>
              </view>
            </u-col>
            <u-col span="1" text-align="right">
              <u-icon name="arrow-right" color="#999999" size="32"></u-icon>
            </u-col>
          </u-row>
        </template>
      </view>
      <view class="area-map-content" v-if="tabIndex == 2">
        <u-row gutter="10" class="u-p-t-15 u-p-b-15" @tap="handleClick()">
          <u-col span="11">
            <view class="lt-row">
              <view class="lt-left-label">
                案件编号：
              </view>
              <view class="lt-right-value">
                {{ markerItem.caseCode }}
              </view>
            </view>
            <view class="lt-row">
              <view class="lt-left-label">
                当事人：
              </view>
              <view class="lt-right-value">
                {{ markerItem.party }}
              </view>
            </view>
            <view class="lt-row">
              <view class="lt-left-label">
                主案由：
              </view>
              <view class="lt-right-value">
                {{ markerItem.caseOfAction }}
              </view>
            </view>
            <view class="lt-row">
              <view class="lt-left-label">
                案发地：
              </view>
              <view class="lt-right-value">
                {{ markerItem.casePlace }}
              </view>
            </view>
          </u-col>
          <u-col span="1" text-align="right">
            <u-icon name="arrow-right" color="#999999" size="32"></u-icon>
          </u-col>
        </u-row>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { AMapMixin } from "@/common/AMapMixin.js";
import fabButton from "@/components/uni-fab.vue";
import caseService from "@/service/case/case.service";

export default {
  components: {
    fabButton,
  },
  mixins: [AMapMixin],
  data() {
    return {
      item: {},
      curPos: [],
      curCords: [],
      options: [],
      markerItem: {},
      containsList: [], // 在确定范围内的涉案点位
      distanceValue: "", // 范围
      distanceNum: "", // 多少米
      caseShow: false,
      tabIndex: 1,
      status: "true",
    };
  },
  onLoad(opt) {
    this.curPos = [opt.longitude, opt.latitude];
    // this.curPos = [114.552431, 38.148808];
    let list = this.$u.dic.getByDictCode("DISTANCE") || [];
    this.options = list.map((item) => {
      return {
        label: item.bcbName,
        ...item,
      };
    });
    this.distanceValue = this.options[0] ? this.options[0].value : "0.05";
    this.distanceNum = this.options[0] ? this.options[0].bcbName : "50米";
  },
  computed: {
    getPopupHeight() {
      if (this.tabIndex == 1) {
        return this.containsList.length >= 5 ? "80%" : this.containsList.length * 96 + 70 + "px";
      } else {
        return 96 + 70 + "px";
      }
    },
  },
  methods: {
    handleClick(row) {
      if (this.tabIndex == 1) {
        if (this.$u.test.isEmpty(row.caseUuid)) {
          this.$u.toast("未关联案件，请先关联案件");
          return;
        }
        this.setRouteParam({
          caseCode: row.caseCode,
          caseUuid: row.caseUuid,
          from: "intelligence", // 情报跳转和大案快报跳转一个逻辑
        });
      } else {
        if (this.$u.test.isEmpty(this.markerItem.caseUuid)) {
          this.$u.toast("未关联案件，请先关联案件");
          return;
        }
        this.setRouteParam({
          caseCode: this.markerItem.caseCode,
          caseUuid: this.markerItem.caseUuid,
          from: "intelligence", // 情报跳转和大案快报跳转一个逻辑
        });
      }
      this.$u.route("/pages/case/offline/caseInfo");
    },
    handleOpenCase() {
      if (this.containsList.length == 0) {
        return this.$u.toast("未关联案件，请先关联案件");
      }
      this.caseShow = true;
    },
    handleOpen(e) {
      this.status = "open";
    },
    handleClose(e) {
      this.status = "close";
    },
    initAmap() {
      this.setMapInstance(this.curPos);
    },
    // 回到远点
    toCurrent() {
      this.amap.setZoomAndCenter(18, this.curCords, false);
    },
    handleChange(value) {
      this.distanceValue = value;
      let list = this.options.find((item) => item.value == value) || { bcbName: "" };
      this.distanceNum = list.bcbName;
      this.amap.clearMap();
      setTimeout(() => {
        this.setCircle();
      }, 100);
    },
    getContainerHeight() {
      let p = this.$u.sys().windowHeight - 44 - uni.upx2px(90) - this.$u.sys().statusBarHeight - 40 + "px";
      // #ifdef H5-DINGDING || H5-WECHAT || H5-EMP
      p = this.$u.sys().windowHeight - uni.upx2px(90) - this.$u.sys().statusBarHeight - 40 + "px";
      // #endif
      return p;
    },
    getContainerWidth() {
      return this.$u.sys().windowWidth + "px";
    },
    setMapInstance(cords) {
      let self = this;
      if (!self.hasInited) return;
      self.curCords = new AMap.LngLat(cords[0], cords[1]);
      self.amap = new AMap.Map("container", {
        center: self.curCords,
        showControlButton: true,
        zoom: 18,
      });
      // self.setCurrentPointMarker(); // 定位信息
      self.$modal.hideLoading();
      self.loadPlugin(["AMap.ToolBar", "AMap.Scale", "AMap.OverView", "AMap.MapType"], function() {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        self.amap.addControl(new AMap.ToolBar());
        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        self.amap.addControl(new AMap.Scale());
        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      });
      self.setCircle();
    },
    setCircle() {
      let self = this;
      let radius = Number(self.distanceValue) * 1000 ? Number(self.distanceValue) * 1000 : 50;
      let circle = new AMap.Circle({
        center: self.curCords,
        radius: radius, //半径
        borderWeight: 3,
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0,
        fillOpacity: 0.3,
        strokeStyle: "dashed",
        strokeDasharray: [10, 10],
        fillColor: "rgba(23,145,252,0.6)",
        zIndex: 99,
      });
      self.amap.add(circle);
      // 缩放地图到合适的视野级别
      self.amap.setFitView([circle]);
      setTimeout(() => {
        self.$modal.showLoading("加载中...");
        self.getRetailerList(circle);
      }, 100);
    },
    justInitMap() {
      this.$modal.alert("请在设备的设置中开启APP的定位权限后重新获取当前位置");
      this.amap = new AMap.Map("container", {
        showControlButton: true,
        zoom: 18,
      });
      this.$modal.hideLoading();
    },
    // 获取零售户
    getRetailerList(circle) {
      let self = this;
      let param = {
        longitude: this.curPos[0],
        latitude: this.curPos[1],
        distanceNum: this.distanceValue,
      };
      caseService
        .getPlaceGisCaseInfo(param)
        .then((res) => {
          self.$modal.hideLoading();
          if (res.success && res.code == 0) {
            if (res.data.length == 0) {
              self.amap.clearMap();
              self.$modal.alert("在该范围内，未发现有违规案件");
            } else {
              self.setMarket(res.data || [], circle);
            }
          } else {
            self.$u.toast(res.msg);
          }
        })
        .catch((err) => {
          self.$u.toast("获取点位失败");
          self.$modal.hideLoading();
        });
    },
    caseShowFn(item) {
      setTimeout(() => {
        this.markerItem = item;
        this.caseShow = true;
        this.tabIndex = 2;
      }, 50);
    },
    setMarket(list, circle) {
      let self = this;
      self.containsList = [];
      list.forEach((item, V) => {
        let icon = new AMap.Icon({
          size: new AMap.Size(24, 30), // 图标尺寸
          image: "static/market/custom.png",
          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
        });
        let position = new AMap.LngLat(item.placeGisX, item.placeGisY);
        if (circle.contains(position)) {
          self.containsList.push(item);
          let marker = new AMap.Marker({
            position: position,
            icon: icon,
            offset: new AMap.Pixel(-9, -30),
            // 设置是否可以拖拽
            draggable: false,
            cursor: "move",
            zIndex: 60,
            // 设置拖拽效果
            raiseOnDrag: true,
          });
          marker.setMap(self.amap);
          marker.on("click", (marker) => {
            self.caseShowFn(item);
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  padding: 0;
}
.map-content {
  /* #ifdef H5-ONLY */
  height: calc(100vh - 44px - 90rpx);
  /* #endif */
  /* #ifndef H5-ONLY  */
  height: calc(100vh - 90rpx);
  /* #endif */
  margin-top: 90rpx;
  overflow: hidden;
}
.header-main {
  /* #ifdef H5-ONLY */
  top: 44px;
  /* #endif */
  /* #ifndef H5-ONLY  */
  top: 0px;
  /* #endif */
  position: fixed;
  left: 0;
  width: 100%;
  background: #ffffff;
}
.header-box {
  width: 100%;
  height: 100%;
  position: relative;
}
.cur-loc {
  position: absolute;
  right: 5px;
  padding: 10px;
  top: 3px;
  background: #fff;
  width: 40px;
  z-index: 9999;
  height: 40px;
}
/deep/ .area-map {
  .u-drawer-content {
    border-radius: 25px 25px 0 0 !important;
  }
  .area-map-title {
    height: 50px;
    font-size: 15px;
    line-height: 50px;
    text-align: center;
  }
  .area-map-content {
    height: calc(100% - 50px);
    padding: 0rpx 30rpx;
    overflow-y: scroll;
  }
}
.bottom-popup {
  height: 40px;
  position: relative;
  background: #ffffff;
}
.z-index {
  z-index: 999;
}
#container {
  overflow: hidden;
}
.lt-root {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.lt-row {
  display: inline-flex;
  width: 100%;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  margin: 2rpx 0;
}
.lt-left-label {
  font-size: 28rpx;
  font-weight: 400;
  flex-shrink: 0;
  color: $cm-form-item-label-color;
}
.lt-right-value {
  margin-left: 16rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: $u-main-color;
}
</style>
